<template>
  <div class="content">
    <Loading :loading="loading">
      <NavBar></NavBar>
      <div class="header">
        <div class="head" @click="changeHead">
          <img :src="obj.image" alt="" />
        </div>
        <van-action-sheet v-model="show" :closeable="false" cancel-text="取消">
          <div class="v-content">
            <van-uploader
              class="c-fft3q2-pop-item flex-row flex-align-center flex-justify-center"
              :max-count="1"
              :after-read="afterRead"
              accept="image/*"
            >
              <div class="label flex-row flex-align-center flex-justify-center">
                <img class="pic" src="./img/xiangce.png" alt="" />
                <div class="word">相册上传</div>
              </div>
            </van-uploader>
            <van-uploader
              class="c-fft3q2-pop-item flex-row flex-align-center flex-justify-center"
              :max-count="1"
              capture="camera"
              :after-read="afterRead"
              accept="image/*"
            >
              <div class="label flex-row flex-align-center flex-justify-center">
                <img class="pic" src="./img/xiangji.png" alt="" />
                <div class="word">相机上传</div>
              </div>
            </van-uploader>
          </div>
        </van-action-sheet>
        <div class="name">
          {{ text }}
        </div>
      </div>
      <div>
        <van-cell title="员工编号" :value="obj.workNo" class="detail" />
      </div>
    </Loading>
  </div>
</template>
<script>
import API from '@/services/h5/my'
import NavBar from '@/components/h5header'
import Loading from '@/components/data-loading'
export default {
  components: { NavBar, Loading },
  data() {
    return {
      show: false,
      obj: {},
      files: [],
      text: '',
      // textShow: false,
      loading: false
    }
  },
  methods: {
    onClickLeft() {
      window.history.go(-1)
    },
    changeHead() {
      this.show = true
    },
    getPersonal() {
      this.loading = true
      API.personal().then(res => {
        if (res.data && res.data.code === 1000) {
          this.obj = res.data.data
          this.text = res.data.data.name
        }
        this.loading = false
      })
    },
    afterRead(file) {
      this.loading = true
      let data = new FormData()
      data.append('files', file.file)
      API.upload(data).then(res => {
        this.loading = false
        if (res.data && res.data.code === 1000) {
          this.$message.success('上传成功')
          this.getPersonal()
        }
      })
      this.show = false
    }
  },
  async mounted() {
    await this.getPersonal()
  }
}
</script>
<style scoped lang="less">
/deep/.van-field__control {
  text-align: center;
}
.content {
  background: #fafafa;
  height: calc(100vh);
  .header {
    width: 375px;
    height: 140px;
    .head {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: 0 auto;
      margin-top: 20px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .v-content {
      width: 375px;
      height: 105px;
      .label {
        width: 375px;
        height: 50px;
        .pic {
          width: 25px;
          height: 19.5px;
        }
        .word {
          font-size: 15px;
          color: 666;
          margin-left: 15px;
        }
      }
    }
    .name {
      font-size: 20px;
      color: #333;
      text-align: center;
      margin-top: 10px;
    }
    .bianji {
      width: 13px;
      height: 12px;
    }
  }
}
</style>
